<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>订单</title>
		<link rel="stylesheet" type="text/css" href="../../static/css/site.css"
			th:href="@{/css/site.css}"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/cart.css"
			th:href="@{/css/cart.css}"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/cart.css"
			  th:href="@{/css/element.css}"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/cart.css"
			  th:href="@{/css/layui/css/layui.css}"/>
	</head>
	<style>
		.whole{
			height:30px;
			width:70px;
			margin-bottom: 5px;
		}
		.part{
			display:none;
			background-color:#a6a9ad;
			height:450px;
			width:550px;
			position:absolute;
			left: 40%;
			top: 20%;
			border: 1px ;
		}
		.addAddress{
			width: 270px; /* 宽度 */
			height: 40px; /* 高度 */
			border-width: 0px; /* 边框宽度 */
			border-radius: 3px; /* 边框半径 */
			background: #1E90FF; /* 背景颜色 */
			cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
			outline: none; /* 不显示轮廓线 */
			font-family: Microsoft YaHei; /* 设置字体 */
			color: white; /* 字体颜色 */
			font-size: 17px; /* 字体大小 */
			margin-bottom: 2px;
		}
		.addAddress:hover{
			background: #5599FF;
		}

	</style>
	<body>
	<div th:replace="~{/commons/Header :: header}"></div><!--<div th:replace="user/userfrag::header('确认订单','')"></div>-->
		
		<div class="check-order">
			<div class="container">
				<div class="order-box">
					
					<div class="title">
						收货地址
					</div>
					<!-- Form -->

					<div class="whole">
						<button onClick="show()" class="addAddress" style="width: 70px;height: 30px;">新增地址</button>
					</div>
						<div class="part">
							<!--<form method="get" th:action="@{/api/address/insert}" target="targetIfr" class="layui-form" style="margin:0px auto;">
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
									<legend>增加收货地址</legend>
								</fieldset>
								<span th:text="${session.msg}" style="color: red"></span>
								<div class="layui-form-item">
								<label class="layui-form-label">学院：</label>
									<div class="layui-input-block">
										<input type="text" name="college" value=""  autocomplete="off" class="layui-input" style="width: 200px"/>
									</div>
								</div>
								<div class="layui-form-item">
								<label class="layui-form-label">专业：</label>
									<div class="layui-input-block">
										<input type="text" name="major" value="" class="layui-input" style="width: 200px" />
									</div>
								</div>
								<div class="layui-form-item">
								<label class="layui-form-label">详细信息：</label>
								<div class="layui-input-block">
									<textarea rows="5" cols="15" name="detail" class="layui-textarea"  style="width: 200px"></textarea>
								</div>
								</div>
								<div class="layui-form-item">
								<label class="layui-form-label">姓名：</label>
								<div class="layui-input-block">
									<input type="text" name="contact" value="" class="layui-input" style="width: 200px"/>
								</div>
								</div>
								<div class="layui-form-item">
								<label class="layui-form-label">电话：</label>
								<div class="layui-input-block">
									<input type="text" name="phone" value="" class="layui-input" style="width: 200px" />
								</div>
								</div>
								<button type="submit" onclick="hide()" class="addAddress" style="margin-left: 75px;margin-top: 4px">添加</button>
							</form>
							<button onClick="hide()" class="addAddress" style="margin-left: 75px">取消</button>
							<iframe name="targetIfr" style="display:none"></iframe>-->
							<form class="layui-form">
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
									<legend>增加收货地址</legend>
								</fieldset>
								<div class="layui-form-item">
									<label class="layui-form-label">姓名 ：</label>
									<div class="layui-input-block">
										<input type="text" name="contact"  placeholder="请输入" autocomplete="off"  class="layui-input" style="width: 300px"/>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">电话</label>
									<div class="layui-input-block">
										<input type="text" name="phone" lay-verify="required" lay-reqtext="没有电话怎么联系，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input" style="width: 300px">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">取件地址</label>
									<div class="layui-input-inline">
										<select name="college" lay-filter="college" >
											<option value="0">请选择学院</option>
										</select>
									</div>
									<div class="layui-input-inline">
										<select name="major" lay-filter="major">
											<option value="">请选择专业</option>
										</select>
									</div>
								</div>
								<div class="layui-form-item layui-form-text">
									<label class="layui-form-label">地址详情</label>
									<div class="layui-input-block">
										<textarea name="detail" placeholder="请输入内容" class="layui-textarea" style="width: 300px"></textarea>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button type="submit" class="layui-btn layui-btn-primary layui-btn-normal" lay-submit="" lay-filter="demo1" style="color: white">添加</button>
										<button type="reset" class="layui-btn layui-btn-primary">重置</button>
									</div>
								</div>
							</form>
						</div>

					<ul class="addr-list clear">
						<li th:data-id="${address.id}"  th:each="address : ${addresss}">
							<div class="name" th:text="${address.getContact()}">张三</div>
							<div class="phone" th:text="${address.getPhone()}">
								158****6789
							</div>
							<div class="address">
								<span class="province"th:text="${address.getCollege()}">山东省</span>
								<span class="city" th:text="${address.getMajor()}">青岛市</span>
								<!--<span class="area" th:text="${address.getArea()}">城阳区</span>
								<span class="town" th:text="${address.getTown()}">城阳街道</span>-->
								<span class="detail" th:text="${address.getDetail()}">金日紫都 办公楼 A座 中享思途 三楼</span>
							</div>
						</li>
					</ul>

					
					<div class="title">
						商品及优惠劵
					</div>
					
					<div class="goods-list" >
						<div class="goods-item clear" th:each="details : ${order.orderDetails}" th:if="${details.getBookType() == '0'}">
								<div class="img"><img src="../../static/img/big-phone.jpg"
													  th:src="@{'/upload/'+${details.book.fileUrl[0]}}"></div>
								<div class="name"><a th:href="@{/book(id=${details.bookId})}"
													 th:text="${details.book.name+' '+details.book.getAuthor() }+${details.getBookType()=='0'?'  新书':'   二手书'}">Xiaomi Civi 8GB+128GB 闪闪黑</a></div>
								<div class="price" th:text="${details.book.getPrice()+' x '+ details.getCount()}">2599元 x 1</div>
								<div class="total" th:text="${details.price*details.getCount()+'元'}">2599元</div>
						</div>
						<div class="goods-item clear" th:each="details : ${order.orderDetails}" th:if="${details.getBookType() == '1'}">
							<div class="img"><img src="../../static/img/big-phone.jpg"
												  th:src="@{'/upload/'+${details.usedBook.fileUrl[0]}}"></div>
							<div class="name"><a th:href="@{/book(id=${details.bookId})}"
												 th:text="${details.usedBook.name+' '+details.usedBook.getAuthor() }+${details.getBookType()=='0'?'  新书':    '二手书'}">Xiaomi Civi 8GB+128GB 闪闪黑</a></div>
							<div class="price" th:text="${details.usedBook.getPrice()+' x '+ details.getCount()}">2599元 x 1</div>
							<div class="total" th:text="${details.price*details.getCount()+'元'}">2599元</div>

						</div>
					</div>
					
					<div class="line"></div>
					
					<div class="title">
						<span>配送方式</span>
						<span class="info">包邮</span>
					</div>
					
					<div class="line"></div>
					
					<div class="title">
						<span>发票</span>
						<span class="info">电子普通发票 个人 商品明细</span>
					</div>
					
					<div class="bill clear">
						<div class="right">
							<div class="bill-item">
								<div class="bill-name">商品件数:</div>
								<div class="bill-price" th:text="${order.orderDetails.size()+'件'}">2件</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">商品总价:</div>
								<div class="bill-price"
									 th:text="${#aggregates.sum(order.orderDetails.![price*count])}+'元'" >8098元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">活动优惠:</div>
								<div class="bill-price" th:text="${'-'+ (#aggregates.sum(order.orderDetails.![price*count]) - #aggregates.sum(order.orderDetails.![resultPrice*count]))+'元'}">-0元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">优惠券抵扣:</div>
								<div class="bill-price">-0元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">运费:</div>
								<div class="bill-price">0元</div>
							</div>
							<div class="bill-item total-price">
								<div class="bill-name">应付总额:</div>
								<div class="bill-money">
									<span id="pay"
										th:text="${#aggregates.sum(order.orderDetails.![resultPrice*count])}">8098</span>元</div>
							</div>
						</div>
					</div>
					
				</div>
				
				<div class="pay clear">
					<div class="right">
						<a th:href="@{/user/cart}" class="btn-cart">返回购物车</a>
						<a href="javascript:;" class="btn-pay">去结算</a>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- 底部 -->
		<div class="site-footer">
			<div class="container">
				<div class="footer-service">
					<ul class="clear">
						<li><a href=""><i class="mi-icon icon-util"></i>预约维修服务</a></li>
						<li><a href=""><i class="mi-icon icon-log"></i>7天无理由退货</a></li>
						<li><a href=""><i class="mi-icon icon-diamond"></i>15天免费换货</a></li>
						<li><a href=""><i class="mi-icon icon-heart"></i>满69包邮</a></li>
						<li><a href=""><i class="mi-icon icon-location"></i>520余家售后网点</a></li>
					</ul>
				</div>
			</div>
		</div>


	<script type="text/javascript" th:src="@{/js/jquery-3.6.0.js}"></script>
	<script type="text/javascript" th:src="@{/js/vue.js}"></script>
	<script type="text/javascript" th:src="@{/js/element.js}"></script>
	<script th:src="@{/css/layui/layui.js}" ></script>
	<script type="text/javascript">
		$(".addr-list li").click(function () {
			$(".addr-list li").removeClass("active");
			$(this).addClass("active");
		});
	</script>

	<!--结算事件-->
	<script type="text/javascript">
			$(".btn-pay").click(function () {
				var url = "[[@{/pay/alipay(orderId=${order.id})}]]"
				var dona_id ='111';
				var dona_money = document.getElementById("pay").innerText;
				var addressId = $(".addr-list .active").attr("data-id");
				if (addressId == undefined){

					alert("请选择一个收货地址")
				}else{
					url += "&addressId="+ addressId;
					url += "&dona_money="+ dona_money
					url += "&dona_id="+ dona_id
					console.log(dona_money)
					window.location.href=url;
				}
			});
		</script>
	<script>
		function show(){
			var show_part = document.querySelector('.part');
			show_part.style.display = 'block';
		}

	</script>
	<script>
		function hide(){
			location.reload();
			var show_part = document.querySelector('.part');
			show_part.style.display = 'none';
		}

		layui.use(['form', 'layedit', 'laydate'], function(){
			var form = layui.form
					,layer = layui.layer
					,layedit = layui.layedit
					,laydate = layui.laydate;

			//日期
			laydate.render({
				elem: '#date'
			});
			laydate.render({
				elem: '#date1'
			});

			$.ajax({
				url:'/api/college/getParent',
				type: 'get',
				data:{},
				success: function (data){
					var html = "<option value=''>请选择学院</option>";
					/* var p = document.getElementById("province");*/
					$.each(data ,function (index,item){
						html += "<option value='"+item.id+"'>"+item.name+"</option>";
					});
					$("select[name='college']").html(html);
					form.render();
				},
				error: function (){

				}
			});
			form.on('select(college)',function(data){
				/* alert(data)
                 alert(data.value)*/
				var parent = data.value;
				if(parent > 0){
					$.ajax({
						url:'/api/college/getByParent',
						type:'get',
						data:{id:parent},
						dataType:'json',
						success:function(data){
							console.log(data)
							var html = "<option value=''>请选择专业</option>";
							$.each(data,function(index,item){
								html += "<option value='"+item.id+"'>"+item.name+"</option>"
							});
							$("select[name='major']").html(html);
							form.render();
						},
						error:function(){

						}
					});
				}
			});

			//监听指定开关
			form.on('switch(switchTest)', function(data){
				layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
					offset: '6px'
				});
				layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
			});

			//监听提交
			form.on('submit(demo1)', function(data){
				/*layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                });*/
				$.ajax({
					url: '/api/address/insert',
					type: 'post',
					data: JSON.stringify(data.field),
					contentType: 'application/json; charset=utf-8',
					dataType: 'json',
					success: function (data) {
						if (data == 1) {
							//hide();
							var show_part = document.querySelector('.part');
							show_part.style.display = 'none';
							alert("提交成功，等待审核")
						} else {
							layer.msg(data.msg);
						}
					},
					error: function () {

					}
				});
				return false;

			});

		});
	</script>
</body>
</html>
